<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue3_demo</title>
    <style>
        #center {
            margin-bottom: 20px;
        }

        input,
        select {
            width: 17%;
            padding: 10px;
            margin-right: 30px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div id="center">
            省：
            <select v-model="province">
                <option v-for="p in provinces" :key="p.id">{{p.name}}</option>
            </select>
            市：
            <select v-model="city">
                <option v-for="c in citys" :key="c.id">{{c.name}}</option>
            </select>
            区：
            <select v-model="district">
                <option v-for="d in districts" :key="d.id">{{d.name}}</option>
            </select>
        </div>
    </div>
</body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="module">
    import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
    createApp({
        data(){
            return {
                provinces:[],
                citys:[],
                districts:[],
                province:'',
                city:'',
                district:''
            };
        },
        methods:{
            async search(){
                const presult = await axios.get(`https://web-server.itheima.net/province`);
                this.provinces = presult.data.data;
                this.province = this.provinces[0].id;
                const cresult = await axios.get(`https://web-server.itheima.net/city?provinceId=${this.province}`);
                this.citys = cresult.data.data;
                this.city = this.citys[0].id;
                const dresult = await axios.get(`https://web-server.itheima.net/area?cid=${this.city}`);
                this.districts = dresult.data.data;
                this.district = this.districts[0].id;
            }
        },
        mounted(){
            this.search();
        },
    }).mount("#app");
</script>
</html>